<template>
    <div class="commonConfig">
        <!--下拉选择框-->
        <div class="cascaderSelectFormClass">
            <el-form ref="ruleForm" :model="opQueryForm" :rules="rules"
                     label-width="52px" label-position="right"
                     size="mini" inline style="text-align: left" class="flex alignCenter">
                <el-form-item label="容器" prop="cascaderValue">
                    <el-cascader ref="CascaderSelect" placeholder="请选择" v-if="CascaderSelectShow" size="small"
                                 :props="cascaderProps" :options="cascaderOptions" filterable clearable
                                 v-model="opQueryForm.cascaderValue" @change="cascaderCheckChange">
                    </el-cascader>
                </el-form-item>
            </el-form>
        </div>


        <!--tab标签页-->
        <el-tabs type="border-card" class="el-tabs" v-model="tabValue" @tab-click="tabClick">
            <template v-show="tabDatas.length">
                <el-tab-pane v-for="tab in tabDatas" :key="tab.id" :name="tab.id" :ref="'elTabPane'+tab.id">
                    <span slot="label" v-if="tab.iconPath"><img :src="tab.iconPath"
                                                                class="elTabPaneIconClass"/>{{ tab.name }}</span>
                    <span slot="label" v-if="!tab.iconPath">{{ tab.name }}</span>
                </el-tab-pane>
            </template>
        </el-tabs>
        <div class="configContent flex">
            <div class="subTabCardContent" v-if="currentOp && Object.keys(currentOp).length>0 && !currentOp.isLeaf">
                <div v-for="subTab in subTabDatas"
                     :key="subTab.id" :label="subTab.name" :name="subTab.id"
                     class="subTab" @click="subTabClick(subTab)" :class="{'checkSubTab':subTab.id == subTabValue}">
                    <span>{{ subTab.name }}</span>
                </div>
            </div>
            <div class="configContentPane">
                <!--                <avue-form-->
                <!--                    ref="configForm"-->
                <!--                    v-model="avueFormDatas"-->
                <!--                    :option="avueFormOptions">-->
                <!--                </avue-form>-->
                <commonConfigForm ref="commonConfigForm" :option="avueFormOptions" v-model="avueFormDatas"
                                  :formId="queryParams.formId" :resourceTypeId="queryParams.resourceTypeId"
                                  :resourceId="queryParams.resourceId" :key="random"
                                  @configFormChangeHandler="configFormChangeHandler"></commonConfigForm>
            </div>
        </div>
    </div>
</template>

<script>
let that
export default {
    name: 'commonConfig',
    model: {
        prop: 'value',
        event: 'configFormChange'
    },
    props: {
        defaultData: {
            type: [Object, String],
        },
        bindParams: {
            type: Object,
            default: () => ({
                resourceTypeId: '',
                resourceId: '',
                formId: '',
                partIndex: '',
                opParentId: '0',
            })
        },
        commonConfig: {
            type: Object
        }
    },
    watch: {
        commonConfig: {
            handler (val) {
                this.dataHandler(val)
            },
            deep: true,
            immediate: true
        },
        bindParams: {
            handler (val) {
                if (this.commonConfig) {
                    val.resourceId = this.commonConfig.resId
                }
                this.queryParams = {...this.queryParams, ...val}
                window.setTimeout(() => {
                    this.initCommonConfig(this.queryParams)
                }, 1000)
            },
            deep: true,
            immediate: true
        },
        avueFormDatas: {
            handler (val) {
                if (val) {
                    //新增判断资源ID，如果有则将资源ID添加到查询参数对象中
                    if (val.resourceId) {
                        this.queryParams.resourceId = val.resourceId
                    }
                    for (let paramKey in this.queryParams) {
                        val[paramKey] = this.queryParams[paramKey]
                    }
                    val['processKey'] = this.currentOp.processKey
                    this.$emit('configFormChange', val)
                }
            },
            deep: true,
            immediate: true
        }
    },
    created () {
        that = this
        console.log('传入值', this.avueFormDatas, '传入查询参数', this.queryParams)
    },
    mounted () {

    },
    data () {
        return {
            CascaderSelectShow: true,
            // 随机数
            random: '',
            contextPath: '/pseudoSecurityPlatform',
            queryParams: this.bindParams || {},
            resIp: '', //设备IP地址
            opQueryForm: {
                cascaderValue: [],
                portValue: ''
            },
            cascaderProps: { //设备级联下拉选项框
                value: 'value',
                label: 'label',
                children: 'children',
                leaf: 'leaf',
                checkStrictly: true,
                lazy: true,
                async lazyLoad (node, resolve) {
                    //第一层级，设备类型
                    if (node.level === 0) {
                        that.$myAxios.get(that.contextPath + '/resource/group/queryChildren', {param: '1'}).then(res => {
                            let nodes = res.data.data.map(p => {
                                p.value = p.id || p.resId
                                p.label = p.groupName || p.resName
                                p.leaf = false
                                p.disabled = true
                                return p
                            })
                            resolve(nodes)
                        })
                    } else {
                        let nodes = []
                        let rscs = []
                        await that.$myAxios.get(that.contextPath + '/resource/group/queryChildren', {param: node.data.id}).then(res => {
                            if (res.data.data) {
                                nodes = res.data.data.map(p => {
                                    p.value = p.id
                                    p.label = p.groupName
                                    p.leaf = false
                                    p.disabled = true
                                    return p
                                })
                            }
                        })
                        await that.$myAxios.get(that.contextPath + '/resource/listResourceByTypeId', {param: node.data.id}).then(res => {
                            if (res.data.data) {
                                rscs = res.data.data.map(p => {
                                    p.value = p.resId
                                    p.label = p.resName
                                    p.leaf = true
                                    return p
                                })
                            }
                        })
                        for (let i = 0; i < rscs.length; i++) {
                            nodes[nodes.length] = rscs[i]
                        }
                        resolve(nodes)
                    }
                }
            },
            cascaderOptions: [],
            currentOp: {}, //当前选中的操作对象
            tabValue: '623566112860323840',  //当前操作
            tabDatas: [], //操作数据集
            subTabValue: '', //当前操作子级操作
            subTabDatas: [], //子级操作数据集
            avueFormDatas: this.value,
            form: '', // 修改后向上传输
            avueFormOptions: {
                column: [],
                emptyBtn: false,
                submitBtn: false,
            },
            avueFormDefaultDatas: {}, //avue表单默认值
            operation: 'config', //当前页面操作类型
            // 验证规则
            rules: {
                cascaderValue: [
                    {required: true, message: '请选择容器', trigger: 'change'},
                ],
                portValue: [
                    {required: true, message: '请选择端口', trigger: 'change'},
                ],
            },
        }
    },
    methods: {
        configFormChangeHandler (val) {
            this.form = JSON.parse(JSON.stringify(val))
            this.$emit('configFormChangeHandler', val)
        },

        dataHandler (avueForm) {
            this.queryParams = avueForm
        },
        //自定义事件，控制事件串联操作
        CustomEvents (id, ways) {
            this.avueFormOptions.column.forEach(item => {
                if (id == item.prop) {
                    //判断是否存在自定义事件
                    if ('event' in item) { //有自定义事件
                        if (item.event[ways] != undefined) {
                            item.event[ways]()
                        }
                    } else {//自带事件
                        item[ways](item)
                    }
                }
            })
        },
        CustomDropDisplay (value, column) {
            let matchedTargetValues = []

            if (value !== '') {
                this.avueFormOptions.shTableData.forEach(item => {
                    if (column.prop === item.sourceValue && item.dicValue === value) {
                        matchedTargetValues.push(...item.targetValue)
                    }
                })
            }

            this.avueFormOptions.column.forEach(v => {
                if (matchedTargetValues.includes(v.prop)) {
                    v.display = false
                } else {
                    v.display = true
                }
            })
        },

        /**
         * 设备级联下拉选项框初始化数据绑定。并绑定已经选中的资源节点
         */
        initCommonConfig (queryParams) {
            //设备ID不允许为空
            if (queryParams.resourceId && '' !== queryParams.resourceId.trim()) {
                this.resIp = queryParams.ip
                //获取资源类型树，用于资源级联下拉选项框
                this.$myAxios.get(that.contextPath + '/operation/getTypTreeByRsc', {id: queryParams.resourceId}).then(res => {
                    if (res.data.code === 0) {
                        //舍弃“网络视图”类型
                        res.data.data.splice(0, 1)
                        //选中当前设备
                        this.$set(this.opQueryForm, 'cascaderValue', res.data.data)
                        this.CascaderSelectShow = false
                        setTimeout(() => {
                            this.CascaderSelectShow = true
                        }, 1)
                        //赋值当前设备类型值
                        queryParams.resourceTypeId = res.data.data[res.data.data.length - 2]
                        // 查询当前表单所在操作的父级操作项
                        if (queryParams.formId) {
                            let param = {formId: queryParams.formId, resourceTypeId: queryParams.resourceTypeId}
                            this.$myAxios.post(that.contextPath + '/operation/getOperationByFormId', param).then(res1 => {
                                if (res1.data.code == 0 && res1.data.data) {
                                    let op = res1.data.data[0]
                                    this.queryOperationByResTypeAndPid(this.queryParams, op.pid)
                                }
                            })
                        } else {
                            //查询指定设备支持的操作，获取pid为0最顶层的操作数据
                            this.queryOperationByResTypeAndPid(this.queryParams, this.queryParams.opParentId)
                        }
                    } else {
                        //查询指定设备支持的操作，获取pid为0最顶层的操作数据
                        this.queryOperationByResTypeAndPid(this.queryParams, this.queryParams.opParentId)
                    }
                })
            } else {
                //查询指定设备支持的操作，获取pid为0最顶层的操作数据
                this.queryOperationByResTypeAndPid(this.queryParams, this.queryParams.opParentId)
            }
        },

        /**
         * 设备选择change事件
         */
        cascaderCheckChange (value) {
            let nodes = this.$refs.CascaderSelect.getCheckedNodes()
            //选中一个节点，且此节点是资源设备节点
            if (nodes && nodes.length === 1 && nodes[0].data.resId) {
                let resource = nodes[0].data
                this.queryParams.resourceTypeId = resource.typeId
                this.queryParams.resourceId = resource.resId
                this.queryParams.formId = ''
                this.queryOperationByResTypeAndPid(this.queryParams, this.queryParams.opParentId)
            } else {
                this.queryOperationByResTypeAndPid(this.queryParams, this.queryParams.opParentId)
            }
        },

        /**
         * 通过当前设备类型和操作pid来查询当前需要的操作数据
         * @param queryParams 查询参数
         * @param pid 当前操作pid
         */
        queryOperationByResTypeAndPid (queryParams, pid) {
            this.$myAxios.post(that.contextPath + '/operation/getOperationsByTypeIdAndPid', {
                resType: queryParams.resourceTypeId,
                pid: pid
            }).then(res => {
                if (res.data.code == 200) {
                    this.tabDatas = res.data.data
                    let op = null
                    if (this.tabValue) {
                        op = this.tabDatas.find(op => {
                            return this.tabValue === op.id
                        })
                    } else {
                        //查找和当前匹配的
                        op = this.tabDatas.find(op => {
                            return queryParams.formId === op.formId
                        })
                    }
                    if (!op) {
                        op = this.tabDatas[0]
                        this.currentOp = op
                    }
                    this.tabValue = op.id
                    //判断当前操作是否包含子级操作，如果有子级则继续查找子级操作数据集
                    if (!op.isLeaf) {
                        this.$myAxios.post(that.contextPath + '/operation/getOperationsByTypeIdAndPid', {
                            resType: queryParams.resourceTypeId,
                            pid: op.id
                        }).then(res1 => {
                            if (res1.data.code == 200) {
                                this.subTabDatas = res1.data.data
                                op = this.subTabDatas[0]
                                this.subTabValue = op.id
                                this.subTabClick(op)
                            } else {
                                this.$message.warning(res1.data.msg)
                            }
                        })
                    } else {
                        this.tabClick()
                    }
                } else {
                    this.$message.info(res.data.msg + ',检查是否设备选择正确！')
                    this.avueFormOptions = {
                        column: [],
                        emptyBtn: false,
                        submitBtn: false,
                    }
                }
            })
        },

        /**
         * 面板切换点击事件
         * @param tab 当前tab实例
         * @param event 点击事件
         */
        tabClick (tab, event) {
            // 验证是否选择设备
            if (this.$refs['ruleForm']) {
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                    } else {
                        console.log('请设备选择！')
                        return false
                    }
                })
            }
            let op = this.tabDatas.find(op => this.tabValue === op.id)
            this.currentOp = op
            //当前操作下有子级操作
            if (!op.isLeaf) {
                let resType = this.queryParams.resourceTypeId
                //查询子级操作集合数据
                this.$myAxios.post(that.contextPath + '/operation/getOperationsByTypeIdAndPid', {
                    resType: resType,
                    pid: op.id
                }).then(res1 => {
                    if (res1.data.code == 200) {
                        this.subTabDatas = res1.data.data
                        op = this.subTabDatas[0]
                        this.subTabValue = op.id
                        this.subTabClick(op)
                    } else {
                        this.$message.warning(res1.data.msg)
                    }
                })
            } else {
                this.queryParams.formId = op.formId
                this.queryOperationUiContentById(op)
            }
        },

        /**
         * 操作子级点击事件
         * @param tab 当前子tab实例
         * @param event 当前子点击事件
         */
        subTabClick (tab, event) {
            this.subTabValue = tab.id
            let op = this.subTabDatas.find(op => this.subTabValue === op.id)
            this.currentOp = op
            this.queryParams.formId = op.formId
            //获取当前操作下的配置界面JSON数据
            this.queryOperationUiContentById(op)
        },

        /**
         * 删除avueFormData中的属性key
         */
        delAvueFormDataProp () {
            //清空avue数据对象属性
            if (!this.avueFormDatas) {
                return
            }
            let keys = Object.keys(this.avueFormDatas)
            for (let key of keys) {
                delete this.avueFormDatas[key]
            }
            //清空默认值数据对象
            let defaultKeys = Object.keys(this.avueFormDefaultDatas)
            for (let key of defaultKeys) {
                delete this.avueFormDefaultDatas[key]
            }
        },

        /***
         * 获取当前资源ID
         */
        getResId () {
            let resId
            if (this.opQueryForm.cascaderValue && this.opQueryForm.cascaderValue.length > 0) {
                resId = this.opQueryForm.cascaderValue[this.opQueryForm.cascaderValue.length - 1]
            } else {
                resId = this.avueFormDatas ? this.avueFormDatas.resourceId : ''
            }
        },

        /**
         * 动态替换参数值
         */
        createDefaultValue (columns) {
            if (!columns) {
                return
            }
            columns.forEach(col => {
                //设置默认值，添加默认值
                if (col.value) {
                    this.avueFormDefaultDatas[col.prop] = col.value
                }
            })
        },

        /**
         * 查询当前操作界面UI JSON数据，并绑定avue框架，显示配置界面
         * @param op
         */
        queryOperationUiContentById (op) {
            // if(this.$refs['configForm']){
            //     this.$refs['configForm'].resetForm();
            // }
            //获取资源ID
            let resId = this.getResId()
            //删除avueFormDatas中的属性key，方便加载新的属性key
            this.delAvueFormDataProp()
            //获取操作对应的界面UI设计json
            this.$myAxios.request('post', that.contextPath + '/operation/getOperationUiContentById/', {
                opId: op.id,
                resId: resId,
                formId: op.formId
            }).then(res => {
                if (res.data.code == 200) {
                    if (res.data.data) {
                        this.$nextTick(() => {
                            if (!res.data.data.design) {
                                return
                            }
                            let data = res.data.data.design.uiContent
                            let column = data.column
                            this.createDefaultValue(column)
                            let group = data.group
                            if (group) {
                                this.parseStrToJsFunc(group)
                                group.forEach(item => {
                                    this.createDefaultValue(item.column)
                                })
                                this.avueFormOptions.group = group
                            }
                            console.log('默认值', this.avueFormDefaultDatas)
                            this.$set(this, 'avueFormOptions', data)
                            this.$set(this, 'random', Math.random())
                            // let column = data.column;
                            // let group = data.group;
                            // let shTableData= data.shTableData;
                            // //将字符串函数转换为js函数对象
                            // this.parseStrToJsFunc(column);
                            // //替换网络字典数据中，接口请求参数进行动态替换
                            // this.createDefaultValue(column);
                            // if (group){
                            //     this.parseStrToJsFunc(group);
                            //     group.forEach(item => {
                            //         this.createDefaultValue(item.column);
                            //     })
                            //     this.avueFormOptions.group = group;
                            // }else {
                            //     delete this.avueFormOptions.group;
                            // }
                            // this.avueFormOptions.column = column;
                            // this.avueFormOptions.gutter = data.gutter;
                            // this.avueFormOptions.labelPosition = data.labelPosition;
                            // this.avueFormOptions.labelSuffix = data.labelSuffix;
                            // this.avueFormOptions.labelWidth = data.labelWidth;
                            // this.avueFormOptions.menuBtn = data.menuBtn;
                            // this.avueFormOptions.menuPosition = data.menuPosition;
                            // this.avueFormOptions.shTableData = shTableData;
                            // //更新表单字典内容，用于刷新远程字典数据。强制刷新界面
                            // if (this.$refs.configForm){
                            //     this.$refs.configForm.updateDic();
                            // }
                            this.queryOperationFormData(op)
                        })
                    } else {
                        this.avueFormOptions = {
                            column: [],
                            emptyBtn: false,
                            submitBtn: false,
                        }
                    }
                } else {
                    this.avueFormOptions = {
                        column: [],
                        emptyBtn: false,
                        submitBtn: false,
                    }
                    this.$message.warning('查询当前配置界面JSON数据失败')
                }
            })
        },

        /**
         * 将json中的js函数字符串转换为function对象
         * @param json 传入的json对象，可以是Object或则Array
         */
        parseStrToJsFunc (json) {
            for (const key in json) {
                //如果对象类型为object类型且数组长度大于0 或者 是对象 ，继续递归解析
                let element = json[key]
                if (element) {
                    if (element.length > 0 && typeof (element) == 'object' || typeof (element) == 'object') {
                        this.parseStrToJsFunc(element)
                    } else {
                        //将js对象中的字符串动态参数进行动态替换
                        if (element.indexOf && element.indexOf('${resourceTypeId}') > -1) {
                            element = element.replace('${resourceTypeId}', this.queryParams.resourceTypeId)
                        }
                        if (element.indexOf && element.indexOf('${resourceId}') > -1) {
                            element = element.replace('${resourceId}', this.queryParams.resourceId)
                        }
                        if (element.indexOf && element.indexOf('${formId}') > -1) {
                            element = element.replace('${formId}', this.queryParams.formId)
                        }
                        json[key] = element
                        //将json中的js函数字符串转换为js函数对象
                        // element.indexOf && (element.indexOf('function') >= 0 || element.indexOf('=>') >= 0)
                        // let funcRegexp = /function\s+\w*\((\w*,?\s*)*\)|\(\{?(\w*,?\s*)*\}?\)\s*=>\s*/
                        // if (element.indexOf && funcRegexp.test(element)) {
                        // let isJsonFunc = true;
                        // try {
                        //     //判断当前字符串是否为json对象，如果是则放去转为js函数，如果不是则直接转换为json函数
                        //     JSON.parse(element);
                        //     isJsonFunc = false;
                        // }catch (e) {
                        //     isJsonFunc = true;
                        // }
                        // if (isJsonFunc){
                        //     json[key] = eval(element);
                        // }
                        // }else if (key == 'pattern'){
                        //     let regex = '';
                        //     if (element.indexOf("/") == 0){
                        //         regex = element.substring(element.indexOf("/")+1,element.length-1);
                        //     }else {
                        //         regex = element;
                        //     }
                        //     if (!json.rules){
                        //         json.rules = [];
                        //     }
                        //     //重构正则验证对象，用于自定义字段格式验证
                        //     let regExp = new RegExp(regex)
                        //     if (json.rules.length > 1){
                        //         json.rules.forEach((rule) => {
                        //             //判断是否有自定义验证
                        //             if (rule.pattern){
                        //                 rule.validator = (ru, value, callback) => {
                        //                     if (regExp.test(value)){
                        //                         callback();
                        //                     }else {
                        //                         callback(new Error(json.label+'格式不匹配！'))
                        //                     }
                        //                 }
                        //                 //删除验证对象原有验证格式
                        //                 delete rule.pattern;
                        //                 delete rule.message;
                        //             }
                        //         })
                        //     }else {
                        //         json.rules.push({
                        //             validator: (ru, value, callback) => {
                        //                 if (regExp.test(value)){
                        //                     callback();
                        //                 }else {
                        //                     callback(new Error(json.label+'格式不匹配！'))
                        //                 }
                        //             }
                        //         })
                        //     }
                        // }else {
                        // }
                    }
                }
            }
        },

        /**
         * 查询当前操作下的已经配置过的历史数据，用于回显历史配置数据
         * @param op
         */
        queryOperationFormData (op) {
            let that = this
            that.queryParams.operationId = op.id
            this.querySetFormData(null, null, null, null)
        },
        /**
         * 查询配置信息
         */
        querySetFormData (param, excludeColumn, changeColumn, changeValue) {
            let that = this
            let queryParam = {}
            if (param) {
                queryParam = {...that.queryParams, ...param}
            } else {
                queryParam = that.queryParams
            }
            if (this.avueFormDatas && this.avueFormDatas.resourceId && !queryParam.resourceId) {
                queryParam.resourceId = this.avueFormDatas.resourceId
            }
            this.$myAxios.post(that.contextPath + '/operation/getOperationFormData/', queryParam).then(res => {
                let avueFormOptions = that.avueFormOptions ? that.avueFormOptions : {}
                let data = null
                if (res.data.code === 0) {
                    data = res.data.data[0].paramAttributes
                    //判断data中是否有数组对象数据，如果有则转为数组
                    //设置当前表单值，判断当前请求操作是内部调度，还是外部接口调用
                }
                this.setAvueFormDatas(avueFormOptions.column, excludeColumn, data, changeColumn, changeValue)
                if (avueFormOptions.group) {
                    avueFormOptions.group.forEach(item => {
                        this.setAvueFormDatas(item.column, excludeColumn, data, changeColumn, changeValue)
                    })
                }
            })
        },

        /**
         * @param columns 当前界面需要加载的字段内容
         * @param data 需要设置的历史数据值
         * @param excludeColumn 需要排除的字段，不用对该排除字段进行赋值操作
         */
        setAvueFormDatas (columns, excludeColumn, data, changeColumn, changeValue) {
            this.avueFormDatas = this.avueFormDatas ? this.avueFormDatas : {}
            for (let index in columns) {
                let column_ = columns[index]
                let prop = column_.prop
                let type = column_.type
                let multiple = column_.multiple
                if (!excludeColumn) {
                    excludeColumn = []
                }
                if (!Array.isArray(excludeColumn)) {
                    excludeColumn = [excludeColumn]
                }
                //对字段进行排除操作，如果在排除字段范围内则不进行赋值操作
                let exclude = excludeColumn.some(item => item == prop)
                if (exclude) {
                    // avueData[prop] = this.avueFormDatas[prop];
                    continue
                }
                if (data && data[prop]) {
                    let data_
                    if (multiple) {
                        // avueData[prop] = data[prop].split(",");
                        data_ = data[prop].split(',')
                    } else {
                        // avueData[prop] = data[prop];
                        data_ = data[prop]
                    }
                    this.$set(this.avueFormDatas, prop, data_)
                } else {
                    let data_
                    //判断默认值是否有值
                    if (this.avueFormDefaultDatas[prop]) {
                        //判断默认值和和实际值是否一致，如果不一致则使用实际值作为数据
                        if (!this.avueFormDatas[prop] || this.avueFormDefaultDatas[prop] == this.avueFormDatas[prop]) {
                            // avueData[prop] = this.avueFormDefaultDatas[prop];
                            data_ = this.avueFormDefaultDatas[prop]
                        }
                    } else {
                        if (type != 'number') {
                            data_ = ''
                        }
                    }
                    if (data_ != undefined) {
                        this.$set(this.avueFormDatas, prop, data_)
                    }
                }
            }
            if (changeColumn) {
                // avueData[changeColumn] = changeValue;
                this.$set(this.avueFormDatas, changeColumn, changeValue)
            }
            if (data) {
                this.$set(this.avueFormDatas, 'partIndex', data.partIndex)
                this.$set(this.queryParams, 'partIndex', data.partIndex)
            }
            this.$set(this.avueFormDatas, 'ip', this.resIp)
            console.log('赋值后的表单值', this.avueFormDatas)
        },

        /**
         * 提交配置数据数据
         */
        pageSubmit () {
            // let reqData = JSON.parse(JSON.stringify(this.avueFormDatas));
            // for(let paramKey in this.queryParams){
            //     reqData[paramKey] = this.queryParams[paramKey];
            // }
            // reqData['processKey'] = this.currentOp.processKey;
            // this.$emit("configFormChange", reqData);
            // if(!this.$refs['ruleForm']){
            //     return;
            // }
            // this.$refs['ruleForm'].validate((valid) => {
            //     if (valid) {
            //         this.$refs['commonConfigForm'].validateForm(() => {
            //             for(let paramKey in this.queryParams){
            //                 this.avueFormDatas[paramKey] = this.queryParams[paramKey];
            //             }
            //             this.avueFormDatas['processKey'] = this.currentOp.processKey;
            //             this.$emit("configFormChange", this.avueFormDatas);
            //         });
            //     } else {
            //         console.log('error submit!!');
            //         return false;
            //     }
            // });
        },

        /**
         * 禁用指定字段或则一批字段
         */
        // disabledColumn(column, disabled){
        //     if (null == disabled || undefined == disabled){
        //         disabled = true;
        //     }
        //     let func = (targetColumn, column) => {
        //         targetColumn.forEach(itemColumn => {
        //             if (column){
        //                 let item = column.find(item => item.prop == itemColumn);
        //                 if (item){
        //                     this.$set(item, 'disabled', disabled);
        //                 }
        //             }
        //         })
        //     }
        //     let targetColumn = [];
        //     if (Array.isArray(column)){
        //         targetColumn.push(...column);
        //     }else {
        //         targetColumn.push(column);
        //     }
        //     func(targetColumn, this.avueFormOptions.column);
        //     if (this.avueFormOptions.group){
        //         for (let groupIndex in this.avueFormOptions.group) {
        //             let item = this.avueFormOptions.group[groupIndex];
        //             func(targetColumn, item.column);
        //         }
        //     }
        // },
        /**
         * 排除指定元素进行禁用启用
         */
        // disabledExcludeColumn(column, disabled){
        //     if (null == disabled || undefined == disabled){
        //         disabled = true;
        //     }
        //     let func = (column, targetColumn) => {
        //         //查看需要排除的队列中是否包含指定元素
        //         column.forEach(item => {
        //             //查看需要排除的队列中是否包含指定元素
        //             let columnName = targetColumn.find(itemColumn => {return item.prop == itemColumn});
        //             if (!columnName){
        //                 this.$set(item, 'disabled', disabled);
        //             }else {
        //                 this.$set(item, 'disabled', !disabled);
        //             }
        //         })
        //     }
        //     let targetColumn = [];
        //     if (Array.isArray(column)){
        //         targetColumn.push(...column);
        //     }else {
        //         targetColumn.push(column);
        //     }
        //     func(this.avueFormOptions.column, targetColumn)
        //     if (this.avueFormOptions.group) {
        //         this.avueFormOptions.group.forEach(item => {
        //             func(item.column, targetColumn)
        //         })
        //     }
        // },

        /**
         * 显示或则隐藏指定
         */
        // displayColumn(column, display){
        //     if (null == display || undefined == display){
        //         display = true;
        //     }
        //     let func = (targetColumn, column) => {
        //         targetColumn.forEach((itemColumn) => {
        //             let item = column.find(item => item.prop == itemColumn);
        //             if (item){
        //                 this.$set(item, 'display', display);
        //             }
        //         })
        //     }
        //     let targetColumn = []
        //     if (Array.isArray(column)){
        //         targetColumn.push(...column);
        //     }else {
        //         targetColumn.push(column);
        //     }
        //     func(targetColumn, this.avueFormOptions.column);
        //     if (this.avueFormOptions.group){
        //         this.avueFormOptions.group.forEach((groupItem) => {
        //             func(targetColumn, groupItem.column);
        //         })
        //     }
        // },

        /**
         * 显示隐藏除指定字段以外的内容
         */
        // displayExcludeColumn(column, display){
        //     if (null == display || undefined == display){
        //         display = true;
        //     }
        //     let func = (targetColumn, column) => {
        //         column.forEach(item => {
        //             //查看需要排除的队列中是否包含指定元素
        //             let columnName = targetColumn.find(itemColumn => {return item.prop == itemColumn});
        //             if (!columnName){
        //                 this.$set(item, 'display', display);
        //             }else {
        //                 this.$set(item, 'display', !display);
        //             }
        //         })
        //     }
        //     let targetColumn = []
        //     if (Array.isArray(column)){
        //         targetColumn.push(...column);
        //     }else {
        //         targetColumn.push(column);
        //     }
        //     func(targetColumn, this.avueFormOptions.column);
        //     if (this.avueFormOptions.group){
        //         this.avueFormOptions.group.forEach(item => {
        //             func(targetColumn, item.column);
        //         })
        //     }
        // },

        /**
         * 设置字段值
         */
        // setColumnData(column, data){
        //     this.$set(this.avueFormDatas, column, data);
        // },

        /**
         * 批量设置值
         */
        // setBatchData(dataObj){
        //     this.avueFormDatas = {...this.avueFormDatas, ...dataObj};
        // },

        /**
         * 设置字段dicData
         */
        // setColumnDicData(prop, dicData) {
        //     let column = this.avueFormOptions.column.find(item => {
        //         return item.prop == prop;
        //     });
        //     // column.dicData = dicData;
        //     this.$set(column, 'dicData', dicData);
        // },

        /**
         * 刷新表单字典数据
         */
        // refreshForm(prop){
        //     //更新表单字典内容，用于刷新远程字典数据。
        //     if (prop){
        //         this.$refs.configForm.updateDic(prop);
        //     }else {
        //         this.$refs.configForm.updateDic();
        //     }
        // },

        /**
         * 获取表单指定列数值
         */
        // getColumnData(column){
        //     return this.avueFormDatas[column];
        // },
    }
}
</script>

<style scoped lang="less">
//修改el-select 右侧图标样式
//三角箭头
/deep/ .el-icon-arrow-up:before {
    content: "\e790";
    font-size: 15px;
    color: #979dab;
    -webkit-transform: translate(-50%, -50%)
}

/*如果不设置图标下拉时是反的*/
/deep/ .el-select .el-input .el-select__caret {
    transform: rotateZ(0deg);
}

/*点击时旋转180°*/
/deep/ .el-select .el-input .el-select__caret.is-reverse {
    transform: rotateZ(180deg);
}

.box-card {
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    position: relative;
    overflow-y: scroll;

    ::v-deep .el-card__body {
        height: calc(100% - 40px);
        padding: 0;
    }
}

.title {
    margin-left: 1.5%;
    display: inline;
    font-size: 16px;
    font-weight: 500;
    color: #333333;
    line-height: 53px;
    margin-bottom: 1%;
}

.closeImg {
    display: inline;
    float: right;
    line-height: 53px;
    margin-right: 1.5%;
    cursor: pointer;
    margin-bottom: 1%;
}

.crumbs {
    margin-left: 24px;
    margin-bottom: 10px;
    padding-top: 10px;
}

.el-select {
    width: 293px;
    height: 32px;
    background: #F8F8F8;
    border-radius: 4px;
}

.tab-title {
    font-size: 14px;
    font-family: Noto Sans SC CN, sans-serif;
    font-weight: 500;
    color: #333333;
    line-height: 24px;
    margin-left: 8px;
}

.el-input {
    width: 224px;
    height: 32px;
    background: #FFFFFF;
    border-radius: 4px;
}

.pageBtns {
    position: relative;
    bottom: 10px;
    right: 10px;
    text-align: right;
}

.el-tabs {
    //height: 100%;
    box-shadow: none;
    font-weight: normal;
    font-size: medium;
    border-right: none !important;
    border-left: none !important;
    border-bottom: none !important;
}

.el-tabs /deep/ .el-tabs__content {
    padding: 0;
    height: calc(100% - 59px);
    overflow: auto;
}

.elTabPaneIconClass {
    width: 1.3vh;
    height: 1.3vh;
    vertical-align: center;
}

.el-scrollbar {
    height: 100%;
}

.tabCardContent {
    height: 100%;
    width: 100%;
    overflow-y: hidden;
    display: inline-block;
    margin-top: 25px;
    text-align: left;
}

.dialogMini /deep/ .el-dialog {
    margin-top: 10vh !important;
}

.dialogMini /deep/ .el-dialog__body {
    max-height: 70vh;
    overflow: auto;
    overflow-x: hidden;
}

/deep/ .el-tabs__nav-prev {
    width: 30px;
    height: 100%;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/deep/ .el-tabs__nav-next {
    width: 30px;
    height: 100%;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/deep/ .el-tabs__nav-wrap.is-scrollable {
    padding: 0px 30px;
}

.configContent {
    .subTabCardContent {
        width: 200px;
        //height: calc(100%);
        min-height: calc(100vh - 225px);
        border-right: 1px solid #E5E8EF;

        &:first-child {
            //padding-top: 16px;
        }
    }

    // 右
    .configContentPane {
        margin-top: 10px;
        width: 100%;

        .avue-form {
            padding: 16px;
        }

        /deep/ .avue-group {
            .el-collapse {
                border-top: none;
                border-bottom: none;
                //avue分组样式
                .el-collapse-item__header {
                    display: flex;
                    border: none;

                    .avue-group__header {
                        text-align: left;
                        margin-left: 10px;

                        .avue-group__title {
                            font-size: 16px;
                            font-weight: normal;
                            width: max-content;
                        }
                    }

                    .el-collapse-item__arrow {
                        margin: 0 8px 0 8px
                    }

                    &::after {
                        content: '';
                        border-bottom: 1px dashed #000;
                        width: 100%;
                        display: inline-block;
                    }
                }

                .el-collapse-item__wrap {
                    border-bottom: none;
                }
            }
        }

        /deep/ .avue-group--header {
            .el-collapse-item__header {
                display: none !important;
            }
        }
    }

    // 左
    .subTab {
        height: 40px;
        width: 200px;
        display: flex;
        align-items: center;
        border-left: 4px solid #FFFFFF;

        span {
            padding-left: 18px;
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #666666;
            line-height: 24px;
        }

        &:hover {
            cursor: pointer !important;
            background: linear-gradient(90deg, rgba(104, 137, 234, 0.5) 28.999999999999996%, rgba(255, 255, 255, 0) 100%);

            span {
                color: #2D69ED !important;
            }
        }
    }
}

.checkSubTab {
    border-left: 4px solid #6889EA !important;
    background: linear-gradient(90deg, rgba(104, 137, 234, 0.5) 28.999999999999996%, rgba(255, 255, 255, 0) 100%);

    span {
        color: #2D69ED !important;
    }
}


/deep/ .cascaderSelectFormClass {
    margin-left: 1.5%;
    margin-top: 10px;
    margin-bottom: 12px;

    .el-cascader .el-input__inner {
        border: 1px solid #CCCCCC;
    }

    //三角箭头
    .el-icon-arrow-down:before {
        content: "";
        font-size: 15px;
        color: #666666;
    }
}

/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item {
    color: #666666 !important;
    background-color: #f7f8fa !important;
    border-color: #c2cad8 !important;
}

/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    color: #333333 !important;
    background-color: #ffffff !important;
    border-right-color: #c2cad8 !important;
    border-left-color: #c2cad8 !important;
    border-bottom-color: #ffffff !important;
}
</style>
